<template>
  <div class="loginOuter">
    <img src="../assets/img/jdy-logo.png" class="jdyLogo" onclick="window.open('https://www.jiandaoyun.com')">
    <div class="loginInner">
      <div class="stdCol" style="width: 50%; overflow: hidden;">
        <img src="../assets/img/loginPic.png" class="loginPic">
        <div class="loginVersion">Version {{ this.global.version }}</div>
      </div>
      <div class="stdCol" style="width: 50%">
        <div class="loginInputOuter">
          <img src="../assets/img/logo.png" class="loginBrandLogo">
          <div class="loginBrandName">{{ this.global.brandName }}</div>
          <div class="loginWrapper">
            <input class="loginInput" placeholder="用户名 UserName" v-model="login.account" />
            <input class="loginInput" placeholder="密码 PassWord" type="password" v-model="login.pwd" @keyup.enter="submitLogin()" />
            <div class="loginBtn" @click="submitLogin()">登录</div>
            <div class="loginHelpOuter">
              <div class="loginHelp" @click="showPopup">忘记账号/密码</div>
            </div>
            <div class="loginVersionMobile">Power By 简道云解决方案实验室</div>
            <div class="loginVersionMobile">Version {{ this.global.version }}</div>
          </div>
        </div>
      </div>
    </div>
    <a-modal v-model="pop_visible"
             title="忘记账号/密码"
             @ok="closePopup"
             ok-text="确认"
             cancel-text="好吧" >
      <p>账号密码存储在公司简道云账户的表单内，请联系公司管理员添加/修改你的账号密码</p>
    </a-modal>
  </div>

</template>
<script>
export default {
  name: "Login",
  data () {
    return {
      login: {
        account:"",
        pwd:"",
      },
      pop_visible: false,
    }
  },
  methods: {
    // 登录验证
    submitLogin() {
      let _this = this;
      let axios = require('axios');
      let url = "";
			let login_url_ip = this.global.serverLocation + "/login";
      let data = JSON.stringify({
        "account": this.login.account,
        "password": this.login.pwd
      });
      if (this.login.account === "" || this.login.pwd === "") { // 校验输入内容不为空
        alert('账号或密码不能为空');
      }
      else {
        this.get_signature(data); // 调用加密函数
        url = login_url_ip + "?nonce=" + this.global.nonce + "&timestamp=" + this.global.timestamp;
        let config = {
          method: 'post',
          url: url,
          headers: {
            'web_signature': this.global.webSignature,
            'Content-Type': 'application/json',
          },
          data : data
        };
        axios(config) // API结果
          .then(function (response) { // API顺利传回
            if ( response.data.state === 0 ){ // 登录成功
              localStorage.setItem("token",response.data.token); // 更新token到本地
              localStorage.setItem("login_state",JSON.stringify(1)); // 更新登录状态
              _this.$router.push({ path: "/user" }); // 跳转进系统
							// console.log(response.data.token);
            }
            else if ( response.data.state === 403 ) { // 密码错误
              _this.systemAlert('error','密码错误',response.data.msg,10)
              localStorage.setItem("token",""); // 更新token到本地
              localStorage.setItem("login_state",JSON.stringify(0)); // 更新登录状态
            }
            else if ( response.data.state === 404 ) { // 账号不存在
              _this.systemAlert('error','账号不存在',response.data.msg,10)
              localStorage.setItem("token",""); // 更新token到本地
              localStorage.setItem("login_state",JSON.stringify(0)); // 更新登录状态
            }
            else { // 其他情况
              _this.systemAlert('error','登录失败',response.data.msg,10)
            }
          })
          .catch(function (error) { // API错误
            _this.systemAlert('error','登录失败',error,10)
          });
      }
    },
    showPopup() {
			this.pop_visible = true;
		},
		closePopup() {
			this.pop_visible = false;
		},
  }
}
</script>
<style>

</style>